import React from 'react';
import { render as renderAmis,ToastComponent, AlertComponent, } from 'amis';

class Serial extends React.Component {
  render() {
    return (
      <>
        <ToastComponent key="toast" position={'top-center'} />
        <AlertComponent key="alert" />
        {renderAmis(
          {
            type: "page",
            title: "详情页1",  // 页面标题
            "regions": [
              "body"
            ],
            "body": [
              // 固定菜单
              {
                "type": "container",
                "body": [
                  {
                    "type": "avatar",
                    "showtype": "image",
                    "icon": "",
                    "fit": "cover",
                    "style": {
                      "width": 50,
                      "height": 50,
                      "borderRadius": 50,
                      "fontFamily": "",
                      "fontSize": 12,
                      "backgroundColor": "",
                      "backgroundSize": "",
                      "backgroundPosition": "",
                      "backgroundImage": "",
                      "borderLeftStyle": "solid",
                      "borderTopStyle": "solid",
                      "borderRightStyle": "solid",
                      "borderBottomStyle": "solid",
                      "marginBottom": "20px"
                    },
                    "id": "u:b76cb4ea45b2",
                    "gap": 4,
                    "onEvent": {
                      "click": {
                        "weight": 0,
                        "actions": [
                          {
                            "ignoreError": false,
                            "actionType": "refresh"
                          }
                        ]
                      }
                    },
                    "src": "https://i.postimg.cc/c1KVGjw0/R.png"
                  },
                  {
                    "type": "avatar",
                    "showtype": "image",
                    "icon": "",
                    "fit": "cover",
                    "style": {
                      "width": 50,
                      "height": 50,
                      "borderRadius": 50,
                      "fontFamily": "",
                      "fontSize": 12,
                      "backgroundColor": "",
                      "backgroundSize": "",
                      "backgroundPosition": "",
                      "backgroundImage": "",
                      "borderLeftStyle": "solid",
                      "borderTopStyle": "solid",
                      "borderRightStyle": "solid",
                      "borderBottomStyle": "solid",
                      "marginBottom": "20px"
                    },
                    "id": "u:3fe40ddbc6be",
                    "gap": 4,
                    "onEvent": {
                      "click": {
                        "weight": 0,
                        "actions": [
                          {
                            "ignoreError": false,
                            "actionType": "url",
                            "args": {
                              "url": "/home",
                              "blank": false
                            }
                          }
                        ]
                      }
                    },
                    "src": "https://i.postimg.cc/bJPsfbFj/780.jpg"
                  },
                  {
                    "type": "avatar",
                    "showtype": "image",
                    "icon": "",
                    "fit": "cover",
                    "style": {
                      "width": 50,
                      "height": 50,
                      "borderRadius": 50,
                      "fontFamily": "",
                      "fontSize": 12,
                      "backgroundColor": "",
                      "backgroundSize": "",
                      "backgroundPosition": "",
                      "backgroundImage": "",
                      "borderLeftStyle": "solid",
                      "borderTopStyle": "solid",
                      "borderRightStyle": "solid",
                      "borderBottomStyle": "solid"
                    },
                    "id": "u:3aa82b01de1f",
                    "gap": 4,
                    "onEvent": {
                      "click": {
                        "weight": 0,
                        "actions": [
                          {
                            "ignoreError": false,
                            "actionType": "goBack"
                          }
                        ]
                      }
                    },
                    "src": "https://i.postimg.cc/W4kF1Czg/power-svgrepo-com.png"
                  }
                ],
                "style": {
                  "position": "fixed",
                  "display": "flex",
                  "flexWrap": "nowrap",
                  "flexDirection": "column",
                  "alignItems": "center",
                  "overflowX": "visible",
                  "width": "80px",
                  "justifyContent": "center",
                  "zIndex": 1,
                  "inset": "auto 10px 10px auto"
                },
                "size": "none",
                "wrapperBody": false,
                "id": "u:74e24a3d423e",
                "isFixedHeight": false,
                "isFixedWidth": true,
                "stickyPosition": "auto",
                "originPosition": "right-bottom",
                "onEvent": {
                  "click": {
                    "weight": 0,
                    "actions": []
                  }
                }
              },
              // 内容上部
              {
                "type": "flex",
                "items": [
                  {
                    "type": "container",
                    "body": [],
                    "size": "none",
                    "style": {
                      "position": "static",
                      "display": "block",
                      "flex": "1 1 auto",
                      "flexGrow": 1,
                      "flexBasis": "0px"
                    },
                    "wrapperBody": false,
                    "isFixedHeight": false,
                    "isFixedWidth": false,
                    "id": "u:e5a21a594886",
                    "themeCss": {
                      "baseControlClassName": {
                        "background:default": "var(--colors-neutral-fill-10)"
                      }
                    }
                  },
                  {
                    "type": "container",
                    "body": [
                      {
                        "type": "container",
                        "body": [
                          {
                            "type": "container",
                            "body": [
                              {
                                "type": "tpl",
                                "tpl": "暂不支持测试页面配置串口，使用多媒体配置文件进行配置",
                                "inline": true,
                                "wrapperComponent": "",
                                "id": "u:edd5acb6e1f6",
                                "themeCss": {
                                  "baseControlClassName": {
                                    "font:default": {
                                      "color": "var(--colors-neutral-fill-11)",
                                      "fontSize": "var(--fonts-size-8)"
                                    },
                                    "padding-and-margin:default": {
                                      "marginTop": "var(--sizes-size-2)",
                                      "marginRight": "var(--sizes-size-2)",
                                      "marginBottom": "var(--sizes-size-2)",
                                      "marginLeft": "var(--sizes-size-2)"
                                    }
                                  }
                                }
                              },
                              {
                                "type": "tpl",
                                "tpl": "没有特殊说明所有设备串口波特率都是9600",
                                "inline": true,
                                "wrapperComponent": "",
                                "id": "u:5759c949532a",
                                "themeCss": {
                                  "baseControlClassName": {
                                    "font:default": {
                                      "color": "var(--colors-neutral-fill-11)",
                                      "fontSize": "var(--fonts-size-8)"
                                    },
                                    "padding-and-margin:default": {
                                      "marginTop": "var(--sizes-size-2)",
                                      "marginRight": "var(--sizes-size-2)",
                                      "marginBottom": "var(--sizes-size-2)",
                                      "marginLeft": "var(--sizes-size-2)"
                                    }
                                  }
                                }
                              },
                              {
                                "type": "tpl",
                                "tpl": "A64设备默认使用/dev/ttyS4串口读卡",
                                "inline": true,
                                "wrapperComponent": "",
                                "id": "u:2044c7406c64",
                                "themeCss": {
                                  "baseControlClassName": {
                                    "font:default": {
                                      "color": "var(--colors-neutral-fill-11)",
                                      "fontSize": "var(--fonts-size-8)"
                                    },
                                    "padding-and-margin:default": {
                                      "marginTop": "var(--sizes-size-2)",
                                      "marginRight": "var(--sizes-size-2)",
                                      "marginBottom": "var(--sizes-size-2)",
                                      "marginLeft": "var(--sizes-size-2)"
                                    }
                                  }
                                }
                              }
                            ],
                            "style": {
                              "position": "relative",
                              "display": "flex",
                              "inset": "auto",
                              "flexWrap": "nowrap",
                              "flexDirection": "column",
                              "alignItems": "flex-start",
                              "flex": "0 0 auto",
                              "justifyContent": "center"
                            },
                            "size": "none",
                            "wrapperBody": false,
                            "id": "u:cf0f7d207e85",
                            "isFixedHeight": false,
                            "isFixedWidth": false,
                            "themeCss": {
                              "baseControlClassName": {
                                "padding-and-margin:default": {
                                  "paddingTop": "1.25rem",
                                  "paddingRight": "6.25rem",
                                  "paddingBottom": "var(--sizes-base-10)",
                                  "paddingLeft": "6.25rem"
                                },
                                "background:default": "#409eff"
                              }
                            }
                          }
                        ],
                        "style": {
                          "position": "relative",
                          "display": "flex",
                          "inset": "auto",
                          "flexWrap": "nowrap",
                          "flexDirection": "column",
                          "alignItems": "flex-start"
                        },
                        "size": "none",
                        "wrapperBody": false,
                        "id": "u:a2cf8bc4e8cc",
                        "isFixedHeight": false,
                        "isFixedWidth": false,
                        "themeCss": {
                          "baseControlClassName": {
                            "padding-and-margin:default": {
                              "paddingTop": "0.375rem",
                              "paddingBottom": "0.375rem"
                            }
                          }
                        }
                      },
                      {
                        "type": "container",
                        "body": [
                          {
                            "type": "button",
                            "label": "测温",
                            "onEvent": {
                              "click": {
                                "actions": []
                              }
                            },
                            "id": "u:d239b2dc9b94",
                            "level": "light",
                            "themeCss": {
                              "className": {
                                "background:default": "#409eff",
                                "font:default": {
                                  "color": "var(--colors-neutral-fill-11)",
                                  "fontSize": "var(--fonts-size-8)"
                                },
                                "padding-and-margin:default": {
                                  "marginTop": "var(--sizes-size-4)",
                                  "marginRight": "var(--sizes-size-4)",
                                  "marginBottom": "var(--sizes-size-4)",
                                  "marginLeft": "var(--sizes-size-4)"
                                }
                              }
                            }
                          },
                          {
                            "type": "button",
                            "label": "开门",
                            "onEvent": {
                              "click": {
                                "actions": [
                                  {
                                    "ignoreError": false,
                                    "actionType": "toast",
                                    "args": {
                                      "msgType": "error",
                                      "closeButton": true,
                                      "showIcon": true,
                                      "msg": "ee",
                                      "className": "theme-toast-action-scope"
                                    }
                                  }
                                ]
                              }
                            },
                            "id": "u:1df62d2a0edd",
                            "level": "light",
                            "themeCss": {
                              "className": {
                                "background:default": "#409eff",
                                "font:default": {
                                  "color": "var(--colors-neutral-fill-11)",
                                  "fontSize": "var(--fonts-size-8)"
                                },
                                "padding-and-margin:default": {
                                  "marginTop": "var(--sizes-size-4)",
                                  "marginRight": "var(--sizes-size-4)",
                                  "marginBottom": "var(--sizes-size-4)",
                                  "marginLeft": "var(--sizes-size-4)"
                                }
                              }
                            }
                          },
                          {
                            "type": "button",
                            "label": "关门",
                            "onEvent": {
                              "click": {
                                "actions": []
                              }
                            },
                            "id": "u:bb7411d478b8",
                            "level": "light",
                            "themeCss": {
                              "className": {
                                "background:default": "#409eff",
                                "font:default": {
                                  "color": "var(--colors-neutral-fill-11)",
                                  "fontSize": "var(--fonts-size-8)"
                                },
                                "padding-and-margin:default": {
                                  "marginTop": "var(--sizes-size-4)",
                                  "marginRight": "var(--sizes-size-4)",
                                  "marginBottom": "var(--sizes-size-4)",
                                  "marginLeft": "var(--sizes-size-4)"
                                }
                              }
                            }
                          }
                        ],
                        "style": {
                          "position": "relative",
                          "display": "flex",
                          "inset": "auto",
                          "flexWrap": "nowrap",
                          "flexDirection": "row",
                          "alignItems": "flex-start",
                          "flex": "0 0 auto",
                          "justifyContent": "center"
                        },
                        "size": "none",
                        "wrapperBody": false,
                        "id": "u:78e8ddeaf7ba",
                        "isFixedWidth": false
                      },
                      {
                        "type": "container",
                        "body": [
                          {
                            "type": "button",
                            "label": "关狗",
                            "onEvent": {
                              "click": {
                                "actions": []
                              }
                            },
                            "id": "u:af5d168be86a",
                            "level": "light",
                            "themeCss": {
                              "className": {
                                "background:default": "#409eff",
                                "font:default": {
                                  "color": "var(--colors-neutral-fill-11)",
                                  "fontSize": "var(--fonts-size-8)"
                                },
                                "padding-and-margin:default": {
                                  "marginTop": "var(--sizes-size-4)",
                                  "marginRight": "var(--sizes-size-4)",
                                  "marginBottom": "var(--sizes-size-4)",
                                  "marginLeft": "var(--sizes-size-4)"
                                }
                              }
                            }
                          },
                          {
                            "type": "button",
                            "label": "关闭USB",
                            "onEvent": {
                              "click": {
                                "actions": []
                              }
                            },
                            "id": "u:d4fbe5dd6d51",
                            "level": "light",
                            "themeCss": {
                              "className": {
                                "background:default": "#409eff",
                                "font:default": {
                                  "color": "var(--colors-neutral-fill-11)",
                                  "fontSize": "var(--fonts-size-8)"
                                },
                                "padding-and-margin:default": {
                                  "marginTop": "var(--sizes-size-4)",
                                  "marginRight": "var(--sizes-size-4)",
                                  "marginBottom": "var(--sizes-size-4)",
                                  "marginLeft": "var(--sizes-size-4)"
                                }
                              }
                            }
                          },
                          {
                            "type": "button",
                            "label": "1关2关",
                            "onEvent": {
                              "click": {
                                "actions": []
                              }
                            },
                            "id": "u:6cff94ae445a",
                            "level": "light",
                            "themeCss": {
                              "className": {
                                "background:default": "#409eff",
                                "font:default": {
                                  "color": "var(--colors-neutral-fill-11)",
                                  "fontSize": "var(--fonts-size-8)"
                                },
                                "padding-and-margin:default": {
                                  "marginTop": "var(--sizes-size-4)",
                                  "marginRight": "var(--sizes-size-4)",
                                  "marginBottom": "var(--sizes-size-4)",
                                  "marginLeft": "var(--sizes-size-4)"
                                }
                              }
                            }
                          },
                          {
                            "type": "button",
                            "label": "1开2开",
                            "onEvent": {
                              "click": {
                                "actions": []
                              }
                            },
                            "id": "u:a510c22d7620",
                            "level": "light",
                            "themeCss": {
                              "className": {
                                "background:default": "#409eff",
                                "font:default": {
                                  "color": "var(--colors-neutral-fill-11)",
                                  "fontSize": "var(--fonts-size-8)"
                                },
                                "padding-and-margin:default": {
                                  "marginTop": "var(--sizes-size-4)",
                                  "marginRight": "var(--sizes-size-4)",
                                  "marginBottom": "var(--sizes-size-4)",
                                  "marginLeft": "var(--sizes-size-4)"
                                }
                              }
                            }
                          },
                          {
                            "type": "button",
                            "label": "1开2关",
                            "onEvent": {
                              "click": {
                                "actions": []
                              }
                            },
                            "id": "u:084fe9a0d3b1",
                            "level": "light",
                            "themeCss": {
                              "className": {
                                "background:default": "#409eff",
                                "font:default": {
                                  "color": "var(--colors-neutral-fill-11)",
                                  "fontSize": "var(--fonts-size-8)"
                                },
                                "padding-and-margin:default": {
                                  "marginTop": "var(--sizes-size-4)",
                                  "marginRight": "var(--sizes-size-4)",
                                  "marginBottom": "var(--sizes-size-4)",
                                  "marginLeft": "var(--sizes-size-4)"
                                }
                              }
                            }
                          },
                          {
                            "type": "button",
                            "label": "1关2开",
                            "onEvent": {
                              "click": {
                                "actions": []
                              }
                            },
                            "id": "u:72bed329beb6",
                            "level": "light",
                            "themeCss": {
                              "className": {
                                "background:default": "#409eff",
                                "font:default": {
                                  "color": "var(--colors-neutral-fill-11)",
                                  "fontSize": "var(--fonts-size-8)"
                                },
                                "padding-and-margin:default": {
                                  "marginTop": "var(--sizes-size-4)",
                                  "marginRight": "var(--sizes-size-4)",
                                  "marginBottom": "var(--sizes-size-4)",
                                  "marginLeft": "var(--sizes-size-4)"
                                }
                              }
                            }
                          }
                        ],
                        "style": {
                          "position": "relative",
                          "display": "flex",
                          "inset": "auto",
                          "flexWrap": "wrap",
                          "flexDirection": "row",
                          "alignItems": "center",
                          "flex": "0 0 auto",
                          "justifyContent": "center"
                        },
                        "size": "none",
                        "wrapperBody": false,
                        "id": "u:6b4e08888a15",
                        "isFixedWidth": false
                      }
                    ],
                    "size": "none",
                    "style": {
                      "position": "static",
                      "display": "flex",
                      "flex": "1 1 auto",
                      "flexGrow": 2,
                      "flexBasis": "0px",
                      "flexWrap": "nowrap",
                      "justifyContent": "center",
                      "flexDirection": "column",
                      "alignItems": "center"
                    },
                    "wrapperBody": false,
                    "isFixedHeight": false,
                    "isFixedWidth": false,
                    "id": "u:8c32cfed728f",
                    "themeCss": {
                      "baseControlClassName": {
                        "padding-and-margin:default": {
                          "paddingTop": "1.375rem",
                          "paddingRight": "1.375rem",
                          "paddingBottom": "1.375rem",
                          "paddingLeft": "1.375rem"
                        },
                        "background:default": "var(--colors-neutral-fill-11)"
                      }
                    }
                  },
                  {
                    "type": "container",
                    "body": [],
                    "size": "none",
                    "style": {
                      "position": "static",
                      "display": "block",
                      "flex": "1 1 auto",
                      "flexGrow": 1,
                      "flexBasis": "0px"
                    },
                    "wrapperBody": false,
                    "isFixedHeight": false,
                    "isFixedWidth": false,
                    "id": "u:74a78b02d060",
                    "themeCss": {
                      "baseControlClassName": {
                        "background:default": "var(--colors-neutral-fill-10)"
                      }
                    }
                  }
                ],
                "style": {
                  "position": "relative",
                  "rowGap": "10px",
                  "columnGap": "10px",
                  "flexWrap": "nowrap",
                  "inset": "auto",
                  "height": "40%",
                  "overflowY": "visible"
                },
                "id": "u:205d6083d1e2",
                "isFixedHeight": true,
                "isFixedWidth": false
              },
              // 底部
              {
                "type": "flex",
                "items": [
                  {
                    "type": "container",
                    "body": [],
                    "size": "none",
                    "style": {
                      "position": "static",
                      "display": "block",
                      "flex": "1 1 auto",
                      "flexGrow": 1,
                      "flexBasis": "0px"
                    },
                    "wrapperBody": false,
                    "isFixedHeight": false,
                    "isFixedWidth": false,
                    "id": "u:72f96b238b2b",
                    "themeCss": {
                      "baseControlClassName": {
                        "background:default": "var(--colors-neutral-fill-10)"
                      }
                    }
                  },
                  {
                    "type": "container",
                    "body": [
                      {
                        "type": "tpl",
                        "tpl": "暂不支持测试页面配置串口，使用多媒体配置文件进行配置",
                        "inline": true,
                        "wrapperComponent": "",
                        "id": "u:98862254c584",
                        "themeCss": {
                          "baseControlClassName": {
                            "font:default": {
                              "color": "var(--colors-neutral-text-2)",
                              "fontSize": "var(--fonts-size-7)"
                            },
                            "padding-and-margin:default": {
                              "marginTop": "var(--sizes-size-5)",
                              "marginRight": "var(--sizes-size-5)",
                              "marginBottom": "var(--sizes-size-5)",
                              "marginLeft": "var(--sizes-size-5)"
                            }
                          }
                        }
                      }
                    ],
                    "size": "none",
                    "style": {
                      "position": "static",
                      "display": "flex",
                      "flex": "1 1 auto",
                      "flexGrow": 2,
                      "flexBasis": "0px",
                      "flexWrap": "nowrap",
                      "justifyContent": "flex-start",
                      "flexDirection": "column",
                      "alignItems": "center"
                    },
                    "wrapperBody": false,
                    "isFixedHeight": false,
                    "isFixedWidth": false,
                    "id": "u:dee875e38002",
                    "themeCss": {
                      "baseControlClassName": {
                        "padding-and-margin:default": {
                          "paddingTop": "1.375rem",
                          "paddingRight": "1.375rem",
                          "paddingBottom": "1.375rem",
                          "paddingLeft": "1.375rem"
                        },
                        "background:default": "var(--colors-neutral-fill-11)"
                      }
                    }
                  },
                  {
                    "type": "container",
                    "body": [],
                    "size": "none",
                    "style": {
                      "position": "static",
                      "display": "block",
                      "flex": "1 1 auto",
                      "flexGrow": 1,
                      "flexBasis": "0px"
                    },
                    "wrapperBody": false,
                    "isFixedHeight": false,
                    "isFixedWidth": false,
                    "id": "u:e5c158e0e23c",
                    "themeCss": {
                      "baseControlClassName": {
                        "background:default": "var(--colors-neutral-fill-10)"
                      }
                    }
                  }
                ],
                "style": {
                  "position": "relative",
                  "rowGap": "10px",
                  "columnGap": "10px",
                  "flexWrap": "nowrap",
                  "inset": "auto",
                  "overflowY": "visible",
                  "height": "60%"
                },
                "id": "u:1f3e2604fa9c",
                "isFixedHeight": false,
                "isFixedWidth": false,
                "themeCss": {
                  "baseControlClassName": {
                    "padding-and-margin:default": {
                      "marginTop": "var(--sizes-size-6)"
                    }
                  }
                }
              }
            ],
            "style": {
              "height": "100vh",
              "overflow": "hidden"
            },
            "id": "u:da0a885ddb0c",
            "asideResizor": false,
            "pullRefresh": {
              "disabled": true
            },
            "themeCss": {
              "baseControlClassName": {
                "background:default": "var(--colors-neutral-fill-10)"
              }
            }      
          }
        )}
      </>
    )
    
  }
}

export default Serial;